<script lang="ts" setup>
import { EIntroduction01MediaType } from '@/api/designer/model'
import { type Introduction01ComponentMeta, JumpConsultMethod, JumpType } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useSwiper } from '@/hooks/useSwiper'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderIntroduction01.less'

defineOptions({
  name: 'RenderIntroduction01',
})
const props = defineProps<{
  render: Introduction01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
const { swiperCls, swiperId } = useSwiper({
  prefix,
  props,
  watchSourceForUpdate: () => props.render.config.items,
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div v-if="platform === 'mobile'" :class="prefix('content-wrap')">
      <!-- 配图区域 -->
      <div v-if="render.config.items && render.config.items.length > 0">
        <!-- CASE: 图片配图 -->
        <div v-if="render.config.mediaType === EIntroduction01MediaType.图片" :class="prefix('image-wrap')">
          <img :src="render.config.items[0].url" :alt="render.config.items[0].coverOrName" width="100%" height="100%" :class="prefix('image-type')">
        </div>
        <!-- CASE: 视频配图 -->
        <div v-else-if="render.config.mediaType === EIntroduction01MediaType.视频" :class="prefix('video-wrap')">
          <video :src="render.config.items[0].url" :poster="render.config.items[0].coverOrName" width="100%" height="100%" :class="prefix('video-type')" controls />
        </div>
        <!-- CASE: 轮播图配图 -->
        <div v-else-if="render.config.mediaType === EIntroduction01MediaType.轮播" :class="prefix('swiper-wrap')">
          <div :id="swiperId" class="swiper" :class="[swiperCls]">
            <div class="swiper-wrapper">
              <div v-for="item in render.config.items" :key="item.id" class="swiper-slide" :class="[prefix('swiper-slide')]">
                <img :src="item.url" :alt="item.coverOrName">
              </div>
            </div>
            <div class="swiper-pagination" />
          </div>
        </div>
      </div>
      <!-- 图文区域 -->
      <div :class="prefix('title')">
        {{ render.config.title }}
      </div>
      <div :class="prefix('content')">
        {{ render.config.description }}
      </div>
      <!-- 查看更多按钮 -->
      <!-- 有链接时才显示按钮 -->
      <template v-if="(render.config.jumpType as any) !== JumpType.None">
        <!-- 非咨询 -->
        <a v-if="(render.config.jumpType as any) !== JumpType.Consult" :class="prefix('view-btn')" target="_blank" :href="render.config.jumpUrl">
          {{ render.config.buttonText }}
        </a>
        <!-- 咨询(JumpType.Consult)类型处理 -->
        <!-- 具体咨询跳转处理逻辑详见`JumpConsultMethod`上方注释 -->
        <!-- item.jumpUrl是经过处理的, 格式：`[method, content].join(',')` -->
        <div v-else-if="Number(render.config.jumpUrl?.split(',')[0]) === JumpConsultMethod.MeiQia" :class="[prefix('view-btn'), prefix('designer-meiqia')]">
          {{ render.config.buttonText }}
        </div>
        <!-- 电话 -->
        <a v-else-if="Number(render.config.jumpUrl?.split(',')[0]) === JumpConsultMethod.DianHua" :class="prefix('view-btn')" :href="`tel:${render.config.jumpUrl?.split(',')[1]}`">
          {{ render.config.buttonText }}
        </a>
        <!-- 其他 -->
        <a v-else :class="prefix('view-btn')" target="_blank" :href="render.config.jumpUrl?.split(',')[1]">
          {{ render.config.buttonText }}
        </a>
      </template>
    </div>
    <div v-else-if="platform === 'pc'" :class="prefix('content-wrap')">
      <!-- 图文区域 -->
      <div :class="prefix('content-main-wrap')">
        <div :class="prefix('title')">
          {{ render.config.title }}
        </div>
        <div :class="prefix('content')">
          {{ render.config.description }}
        </div>
        <!-- 查看更多按钮 -->
        <!-- 有链接时才显示按钮 -->
        <template v-if="(render.config.jumpType as any) !== JumpType.None">
          <!-- 非咨询 -->
          <a v-if="(render.config.jumpType as any) !== JumpType.Consult" :class="prefix('view-btn')" target="_blank" :href="render.config.jumpUrl">
            {{ render.config.buttonText }}
          </a>
          <!-- 咨询(JumpType.Consult)类型处理 -->
          <!-- 具体咨询跳转处理逻辑详见`JumpConsultMethod`上方注释 -->
          <!-- item.jumpUrl是经过处理的, 格式：`[method, content].join(',')` -->
          <div v-else-if="Number(render.config.jumpUrl?.split(',')[0]) === JumpConsultMethod.MeiQia" :class="[prefix('view-btn'), prefix('designer-meiqia')]">
            {{ render.config.buttonText }}
          </div>
          <!-- 电话 -->
          <a v-else-if="Number(render.config.jumpUrl?.split(',')[0]) === JumpConsultMethod.DianHua" :class="prefix('view-btn')" :href="`tel:${render.config.jumpUrl?.split(',')[1]}`">
            {{ render.config.buttonText }}
          </a>
          <!-- 其他 -->
          <a v-else :class="prefix('view-btn')" target="_blank" :href="render.config.jumpUrl?.split(',')[1]">
            {{ render.config.buttonText }}
          </a>
        </template>
      </div>
      <!-- 配图区域 -->
      <div v-if="render.config.items && render.config.items.length > 0" :class="prefix('image-main-wrap')">
        <!-- CASE: 图片配图 -->
        <div v-if="render.config.mediaType === EIntroduction01MediaType.图片" :class="prefix('image-wrap')">
          <img :src="render.config.items[0].url" :alt="render.config.items[0].coverOrName" width="100%" height="100%" :class="prefix('image-type')">
        </div>
        <!-- CASE: 视频配图 -->
        <div v-else-if="render.config.mediaType === EIntroduction01MediaType.视频" :class="prefix('video-wrap')">
          <video :src="render.config.items[0].url" :poster="render.config.items[0].coverOrName" width="100%" height="100%" :class="prefix('video-type')" controls />
        </div>
        <!-- CASE: 轮播图配图 -->
        <div v-else-if="render.config.mediaType === EIntroduction01MediaType.轮播" :class="prefix('swiper-wrap')">
          <div :id="swiperId" class="swiper" :class="[swiperCls]">
            <div class="swiper-wrapper">
              <div v-for="item in render.config.items" :key="item.id" class="swiper-slide" :class="[prefix('swiper-slide')]">
                <img :src="item.url" :alt="item.coverOrName">
              </div>
            </div>
            <div class="swiper-pagination" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
